html,body{margin:0;padding:0}:root{--author: "Matt Cannon";--contact: "mc@mattcannon.design";--description: "A game based quiz where you shoot asteroids, because why not?";--keywords: "codepenchallenge, cpc-quiz, game, rocket, planets, quiz, blaster";--last-modified: "2024-09-19";--content-language: "en";--generator: "HTML5, CSS3, JavaScript, jQuery";--title: "Quiz Blaster"}body{margin:0;padding:0;background:#000;overflow:hidden;font-family:"Press Start 2P",cursive;color:#fff}html,body,#app{width:100%;height:100%}#game-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2}#space-background{position:absolute;top:0;left:0;width:200%;height:100%;z-index:1;overflow:hidden}.intro-image{width:640px;height:491px;object-fit:contain;display:block;margin:0 auto}#intro-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:10;display:flex;justify-content:center;align-items:center}@keyframes scrollStars{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes scrollPlanetsSmooth{0%{transform:translate(50vw)}to{transform:translate(-200vw)}}.star-layer{position:absolute;width:200%;height:100%;left:0;top:0}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%}#star-layer-0{animation:scrollStars 60s linear infinite}#star-layer-1{animation:scrollStars 120s linear infinite}#star-layer-2{animation:scrollStars 180s linear infinite}.planet{position:absolute;background-size:contain;background-repeat:no-repeat;z-index:2;image-rendering:pixelated;animation:scrollPlanetsSmooth linear infinite}.planet-0-0,.planet-0-1,.planet-0-2{animation-duration:180s;width:100px;height:100px}.planet-1-0,.planet-1-1{animation-duration:120s;width:150px;height:150px}.planet-2-0,.planet-2-1{animation-duration:90s;width:200px;height:200px}.player{position:fixed;width:100px;height:100px;z-index:10;transform-origin:center;transition:transform .5s ease;image-rendering:pixelated;animation:moveRocket 8s ease-in-out infinite}@keyframes moveRocket{0%{transform:translateY(0) translate(-50%,-50%)}50%{transform:translateY(-10px) translate(-50%,-50%)}to{transform:translateY(0) translate(-50%,-50%)}}.player img{width:100%;height:100%;object-fit:contain}.trail-point{position:absolute;border-radius:50%;background:radial-gradient(circle,orange,#ff4500cc);box-shadow:0 0 10px #ff4500;z-index:9;transform:translate(-50%,-5px);bottom:0;left:50%}.bullet{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff,#fffc);box-shadow:0 0 10px #fff;z-index:9;left:50px;top:40px}.flash{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff,#f1c40f);width:35px;height:35px;transform:translate(-50%) translateY(-50%);z-index:8;opacity:.8;animation:flash-pulse .1s ease-out;left:-25px}@keyframes flash-pulse{0%{opacity:1;transform:translate(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-50%) scale(1.5)}}.question,.timer,.score,.feedback,.game-over,.question-count{font-family:"Press Start 2P",cursive;text-shadow:2px 2px #000;z-index:20}.question{position:absolute;top:20px;left:50%;transform:translate(-50%);font-size:45px;text-align:center;width:80%;line-height:1.5}.answer{position:absolute;color:#fff;font-size:12px;text-align:center;width:100px;height:100px;z-index:15;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none}.answer span{position:relative;z-index:1}.timer{position:absolute;font-size:48px;bottom:10px;left:50%;transform:translate(-50%);color:#ff0}.score{position:absolute;font-size:25px;bottom:10px;right:10px;color:#00f}.question-count{position:absolute;font-size:25px;bottom:10px;left:10px;color:#fff}.feedback{position:absolute;font-size:36px;text-align:center;padding:10px;border-radius:5px;background:#000000b3;z-index:25}.game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-align:center;background:#000c;padding:20px;border-radius:10px;z-index:30;width:750px;height:519px;background-image:url(https://mattcannon.games/codepen/quiz/game-over.jpg);background-size:contain;background-repeat:no-repeat;background-position:center top;display:flex;flex-direction:column;justify-content:flex-end}.game-over p{margin-top:10px}@keyframes explode{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}@keyframes correct{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.game-over~.timer{display:none}